<template>
	<div class="page">
		<!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">转发管理</span>　|　<span>添加新转发</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<el-form :model="form" block id="addform" class="demo-form-inline">
			<el-form-item label="项目名称:" :label-width="formLabelWidth">
				<el-select v-model="form.product_id" placeholder="选择项目" class="inpu" @change="changePro(form.product_id)">
					<el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="设备名称:" :label-width="formLabelWidth" >
				<el-select v-model="form.equip_id" placeholder="选择设备" class="inpu" @change="changeDevice(form.equip_id)">
					<el-option v-for="item in devices" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select></br>
				<span v-if="form.equip_id" style="width:auto;">设备编码:{{form.equip_code}}</span>
			</el-form-item>
			<el-form-item v-if="slaves.length>2 && form.equip_id"  label="子设备名称:" :label-width="formLabelWidth" >
				<el-select v-model="form.slave_id" placeholder="选择子设备" class="inpu"  @change="changeSlave(form.slave_id)">
					<el-option v-for="item in slaves" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
				<!-- <div class="tip" style="width:auto;height:0.4rem;">如果是全部，地址需要手动输入</div> -->
			</el-form-item>
			<el-form-item label="数据点:" :label-width="formLabelWidth">
				<el-select
				    v-model="form.is_all"
					@change="changeIsAll(form.is_all)"
				    collapse-tags
				    class="inpu"
					style="height:0.95rem;">
				    <el-option
					  style="text-align:left;padding-left:0.2rem;"
				      v-for="item in alls"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value"
					  :disabled="(slaves.length>2 && form.slave_id==0) || (slaves.length<=2 && form.equip_id==0)">
				    </el-option>
				</el-select>
			    <el-select
			        v-model="form.sensor_id"
					v-show="form.is_all==2"
			        multiple
					collapse-tags
			        class="inpu"
			    	style="height:0.95rem;">
			        <el-option
			    	  style="text-align:left;padding-left:0.2rem;"
			          v-for="item in sensors"
			          :key="item.value"
			          :label="item.label"
			          :value="item.value">
			        </el-option>
			    </el-select>
			</el-form-item>
			<el-form-item label="转发URL:" :label-width="formLabelWidth" >
				<el-input v-model="form.transfer_url" auto-complete="off" class="inpu" style="width:11.1rem;" placeholder="请输入转发地址"></el-input>
			    <!-- <div class="tip" style="width:auto;height:0.4rem;">注：从项目到数据点，如果上一级(上一项)选择全部，下一级(下一项)自然就是全部</div> -->
			</el-form-item>
			<el-form-item label="" :label-width="formLabelWidth" >
				<span style="display:block;width:11.2rem;height:0.8rem;color:red;line-height:0.4rem;">注：平台向URL地址POST推送校验数据，请确保能成功响应.</span>
			</el-form-item>
			<el-form-item style="margin-left:1.2rem;">
			    <el-button type="success" size="small" @click="addTranspond">保存</el-button>
			    <el-button type="primary" size="small" @click="resetForm">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
    export default {
        name: 'addTranspond',
        data() {
            return {
                userType:Number(localStorage.getItem("atuser_type")),
                one: 1,
                zero: 0,
                formLabelWidth: '120px',
                form: {
                    product_id: 0,
                    equip_id: 0,
					equip_code:'',
                    slave_id: 0,
					is_all:1,
                    sensor_id: [''],
                    transfer_url:''
                },
				options: [
					{
						value: 0,
						label: "全部"
					}
				],
                devices: [{
                    value: 0,
                    label: "全部",
                    type: 2,
					slaveCount: 0,
                    disabled:false
                }],
                slaves: [{
                    value: 0,
                    label: "全部"
                }],
				alls:[
					{
						value: 1,
						label: "全部"
					},
					{
						value: 2,
						label: "手动选择(可多选)"
					}
				],
                sensors: []
            }
        },
        created() {
            //this.grade = localStorage.getItem("grade");
			this.getProduct();
        },
		
        methods: {
            getProduct() {
				this.options=[];
				this.$http({
                    method: 'post',
                    url: 'api/product/all',
                    data: {}
                }).then(res => {
                    if (res && res.data.result == "success") {

                        for (var i = 0; i < res.data.data.length; i++) {
                            var option = {
                                value: res.data.data[i].id,
                                label: res.data.data[i].product_name,
                                disabled: res.data.data[i].equips_count ? false : true
                            }
                            this.options.push(option);
                        }
                        this.form.product_id = this.options[0].value;
                        this.getDevice(this.form.product_id);
						

                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            resetForm() {
                for (var key in this.form) {
                    this.form[key] = 0;
                }
				this.form.transfer_url="";
				this.form.is_all=1;
				this.form.equip_code="";
                
            },
            goBack() {
                this.$router.go(-1);
            },
            //获取项目下所有设备函数
            getDevice(id) {
                var that = this;
				this.devices=[];
				this.$http({
                    method: 'post',
                    url: 'api/equip/all',
                    data: {
                        'product_id': id
                    }
                }).then(res => {
                    if (res && res.data.result == "success") {
                        if (res.data.data.length) {
                            for (var i = 0, len = res.data.data.length; i < len; i++) {
                                var device = {
                                    value: res.data.data[i].id,
                                    label: res.data.data[i].equip_name,
                                    type: res.data.data[i].type,
									code: res.data.data[i].equip_code,
                                    slaveCount: res.data.data[i].slaves_count
                                }
                                that.devices.push(device);
                            }
                            this.form.equip_id = this.devices[0].value;
							this.form.equip_code = this.devices[0].code;
							if(this.devices[0].type==1){
								this.getSlave(this.devices[0].value);
							}else{
								this.getSensor(this.devices[0].value);
							}
						}
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            
            getSlave(id) {
                var that = this;
                this.slaves = [{
                    value: 0,
                    label: "全部",
                }];
                this.$http({
                    method: 'post',
                    url: 'api/slave/all',
                    data: {
                        "equip_id": id

                    }
                }).then(res => {
                    if (res && res.data.result == "success") {
                        for (var i = 0; i < res.data.data.length; i++) {
                            var slave = {
                                value: res.data.data[i].id,
                                label: res.data.data[i].slave_name
                            }
                            this.slaves.push(slave);
                        }
						if(this.slaves.length==2){
                            this.form.slave_id = this.slaves[1].value;
							this.getSensor(this.form.equip_id);
						}else{
							this.form.slave_id = this.slaves[0].value;
						}
                    }
                    // console.log(that.pointdata[0].icon)
                }).catch(error => {
                    console.log(error);

                });
            },
            
            getSensor(id) {
                var that = this;
                this.sensors = [];
                this.$http({
                    method: 'post',
                    url: 'api/sensor/all',
                    data: this.slaves.length>2? {
                        "slave_id": id

                    } : {
                        "equip_id": id

                    }
                }).then(res => {
                    if (res && res.data.result == "success") {
                        for (let i = 0, len = res.data.data.length; i < len; i++) {
                            let sensor = {
                                value: res.data.data[i].id,
                                label: res.data.data[i].sensor_name
                            }
                            this.sensors.push(sensor)
                        }
						this.form.sensor_id = [this.sensors[0].value];
                    }

                }).catch(error => {
                    console.log(error)
                });

            },

            changeDevice(device) {
				this.form.is_all = 1;
				this.form.sensor_id = [];
				this.slaves=[];
				this.sensors=[];
				if (device) {
                    for (let i = 0; i < this.devices.length; i++) {
                        if (device == this.devices[i].value) {
							this.form.equip_code = this.devices[i].code;
                            if (this.devices[i].type == 1) {
                               this.getSlave(device);
							} else {
                                this.form.slave_id = 0;
                                this.getSensor(device);
                            }
                            break;
                        }
                    }
                }
            },
			
			changeIsAll(isAll){
				if(isAll==1){
				   this.form.sensor_id = [];
				}else{
				   this.form.sensor_id=this.sensors[0]?[this.sensors[0].value]:[];
				}
			},
            
			changeSlave(slave) {
                this.form.is_all = 1;
				this.form.sensor_id = [];
                if (slave) {
                    this.getSensor(slave)
                }else{
					this.sensors = [];
				}
            },

            
            changePro(name) {
                var that = this;
				this.form.equip_id = '';
                this.form.slave_id = '';
                this.form.is_all = 1;
				this.form.sensor_id = [];
				if(name){
					this.getDevice(name);
				}else{
					this.devices = [];
				}
            },
            
            addTranspond() {
                var that = this;
				if(this.form.is_all==1){
					this.form.sensor_id="";
				}else{
				    var oldArr=this.form.sensor_id;
				    this.form.sensor_id = this.form.sensor_id.join(',');
				}
                this.$http({
                    method: 'post',
                    url: 'api/rule/add',
                    data: this.form
                }).then(res => {
                    if (res && res.data.result == "success") {
                        this.$message({
                            message: '恭喜,添加转发成功!',
                            type: 'success',
                            center: true
                        });
                        this.$router.go(-1);
                    }else{
						this.form.sensor_id = oldArr;
					}
                }).catch(error => {
					this.form.sensor_id = oldArr;
                    console.log(error);
                });
            }

        }
    }
</script>

<style scoped>
    @media all and (max-width:2560px) {
        .demo {
            margin-left: -1.2rem!important;
        }
        .tip2 {
            width: 65%!important;
        }
    }
    
    @media all and (max-width:1920px) {
        .demo {
            margin-left: -1.2rem!important;
        }
        .tip2 {
            width: 60%!important;
        }
    }
    
    @media all and (max-width:1600px) {
        .demo {
            margin-left: -1.4rem!important;
        }
        .add {
            bottom: 0.1rem!important;
        }
        .tip2 {
            width: 50%!important;
        }
    }
    
    @media all and (max-width:1440px) {
        .demo {
            margin-left: -1.5rem!important;
        }
        .tip2 {
            width: 48%!important;
            right: 0.5rem!important;
        }
    }
    
    @media all and (max-width:1366px) {
        .demo {
            margin-left: -1.9rem!important;
            margin-top: 0.3rem!important;
        }
        .tip2 {
            width: 43%!important;
            right: 0.5rem!important;
        }
    }
    
    #addform {
        float: left;
        text-align: left;
        margin-top: 0.3rem;
        width: 99.4%;
        /* height:14rem; */
        line-height: 0.6rem;
        /* border:1px solid red; */
    }
    
    #linkForm {
        /* position:relative; */
        line-height: 0.6rem;
        float: left;
        /* margin-top: 0.2rem; */
        /* margin-left:1rem; */
        text-align: left;
        width: 99.4%;
        margin-top: -0.3rem;
        padding-top: 0.2rem;
        z-index: 10;
        border-top: 1px solid #ddd;
    }
    
    .inpu {
        display: inline-block;
        vertical-align: middle;
        width: 5.5rem;
        font-size: 14px;
    }
    
    .tip {
        color: #FF5722;
        width: 4.5rem;
        font-size: 0.25rem;
        margin-top: 0.2rem;
        height: 0.8rem;
        line-height: 0.4rem;
        margin-bottom: 0rem;
    }
    
    .line {
        width: 100%;
        position: relative;
        height: auto;
        margin-top: 0.1rem;
        padding-top: 0.3rem;
        /* margin-top:-0.4rem;
		margin-bottom:0.5rem; */
        border: 1px dashed #ddd;
    }
    
    .leftName {
        position: absolute;
        top: -1px;
        left: -1px;
        width: auto;
        padding: 0 0.1rem;
        display: inline-block;
        height: 0.6rem;
        line-height: 0.6rem;
        font-size: 0.3rem;
        background-color: #222831;
        /*#22567b*/
        color: #fff;
    }
    
    .tip2 {
        width: 50%;
        position: absolute;
        top: -2px;
        right: 1rem;
        height: 1.4rem;
        line-height: 0.35rem;
    }
    
    .add {
        position: absolute;
        left: 80px;
        bottom: 0.2rem;
        font-size: 0.3rem;
        color: #409Eff;
        border: 1px solid #409Eff;
    }
    
    #notice {
        position: absolute;
        left: 180px;
        bottom: 0.2rem;
        height: 0.6rem;
        line-height: 0.6rem;
        width: auto;
        font-size: 0.3rem;
        color: red;
    }
    
    #addform /deep/ .el-form-item {
        margin-bottom: 10px;
    }
</style>